<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于用户从几个选项中选择某一个的场景
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-subsection :list="list" mode="subsection" :current="current1" @change="change1"></fu-subsection>
			</view>
		</fu-section>
		
		<fu-section title="按钮模式" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-subsection :list="list" mode="button" :current="current2" @change="change2"></fu-subsection>
			</view>
		</fu-section>
		
		<fu-section title="更换主题" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-subsection :list="list" mode="subsection" activeColor="rgba(1, 190, 255, 1)" :current="current3" @change="change3"></fu-subsection>
			</view>
		</fu-section>
		
		<fu-section title="默认位置" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-subsection :list="list" mode="button" :current="current4" activeColor="rgba(1, 190, 255, 1)" @change="change4"></fu-subsection>
			</view>
		</fu-section>
		
		<fu-section title="自定义样式" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20 fu-bg-F5F5F5 fu-b-r-10 fu-p-x-10 fu-p-y-5 fu-b-r-30">
				<fu-subsection
					:list="list"
					mode="button"
					:current="current5"
					activeColor="#f9ae3d"
					custom-style="height: 60rpx;border-radius: 30rpx;"
					custom-item-style="border-radius: 30rpx;"
					@change="change5"
				></fu-subsection>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive, ref } from 'vue'

	// data数据
	let current1 = ref(0);
	let current2 = ref(0);
	let current3 = ref(0);
	let current4 = ref(1);
	let current5 = ref(0);
	const list = reactive([
		{name: '待付款'},
		{name: '待发货'},
		{name: '已发货'}
	]);
	
	// methods方法
	const change1 = (index) => {
		current1.value = index;
	};
	
	const change2 = (index) => {
		current2.value = index;
	};
	
	const change3 = (index) => {
		current3.value = index;
	};
	
	const change4 = (index) => {
		current4.value = index;
	};
	
	const change5 = (index) => {
		current5.value = index;
	};
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>